// 源插件
import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import moment from 'moment';
import router from 'umi/router';

// 视图插件
import {
  Spin,
  Row,
  Col,
  Card,
  Form,
  Input,
  Select,
  Icon,
  Button,
  Dropdown,
  Menu,
  InputNumber,
  DatePicker,
  Modal,
  message,
  Badge,
  Divider,
  Steps,
  Radio,
  Upload,
} from 'antd';

// 外部组件
import StandardTable from '@/components/StandardTable';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';

// css OR less预编译器

// 图片

const FormItem = Form.Item;
const { Option } = Select;

/**
 *  Created by xjc on 2019/8/15
 *  Describe:数据连接
 */

@connect(({ lastTrade, loading }) => ({
  lastTrade,
  loading: loading.models.lastTradeRule,
}))
@Form.create()
class UpdateModal extends PureComponent {
  componentWillMount() {}

  /**
   *  Created by xjc on 2019/8/15
   *  Describe:当前状态
   */

  state = {
    confirmLoading: false,
  };

  onChange = e => {};

  okHandle() {
    const that = this;
    const { row } = this.props;
    that.setState({
      confirmLoading: true,
    });
    return new Promise((resolve, reject) => {
      setTimeout(resolve, 800);
    })
      .then(() => {
        that.setState({
          confirmLoading: false,
        });
        that.props.form.validateFields((err, values) => {
          if (!err) {
            {
              /* code (string, optional): 股票代码 ,
costPrice (number, optional): 买入时为买入价|卖出时为成本价 ,
expiry (string, optional): 到期日 ,
nowPrice (number, optional): 买入时 为空|卖出时卖出价 ,
optionCount (integer, optional): 数量 ,
optionType (integer, optional): 类型 1SP 2SC 3BP 4BC ,
strikePrice (number, optional): 行权价 */
            }
            const { dispatch } = that.props;
            dispatch({
              type: 'lastTrade/UpdateOptionTrade',
              payload: {
                id: row.id,
                costPrice: parseFloat(values.costPrice),
                nowPrice: parseFloat(values.nowPrice),
                optionCount: parseInt(values.optionCount),
              },
              callback: res => {
                that.props.closeVisbile();
              },
            });
          }
        });
      })
      .catch(() => console.log('Oops errors!'));
  }

  cancelHandle() {
    this.props.closeVisbile();
  }

  render() {
    const { confirmLoading } = this.state;
    const { visible, form, row } = this.props;
    const { getFieldDecorator } = form;

    return (
      <Modal
        destroyOnClose
        title="添加"
        visible={visible}
        // width={'80%'}
        centered
        onOk={this.okHandle.bind(this)}
        confirmLoading={confirmLoading}
        onCancel={this.cancelHandle.bind(this)}
      >
        <Form onSubmit={this.handleSearch} style={{ overflowY: 'auto' }}>
          <Row>
            <Col>
              <FormItem label="期权代码" labelCol={{ span: 8 }} wrapperCol={{ span: 15 }}>
                {getFieldDecorator('code', { initialValue: row.code, required: true })(
                  <Input style={{ width: '85%' }} placeholder="" disabled />
                )}
              </FormItem>
              {/* <FormItem label="买入价" labelCol={{ span: 8 }} wrapperCol={{ span: 15 }}>
                {getFieldDecorator('costPrice', { initialValue: row.costPrice, required: true })(
                  <Input style={{ width: '85%' }} placeholder="" />
                )}
              </FormItem> */}
              {/* <FormItem label="到期日" labelCol={{ span: 8 }} wrapperCol={{ span: 15 }}> */}
              {/* {form.getFieldDecorator('expiry', { */}
              {/* initialValue: moment(row.expiry), */}
              {/* rules: [{ type: 'object' }], */}
              {/* })( */}
              {/* <DatePicker */}
              {/* style={{ width: '85%' }} */}
              {/* showTime */}
              {/* format="YYYY-MM-DD" */}
              {/* placeholder="选择到期日" */}
              {/* /> */}
              {/* )} */}
              {/* </FormItem> */}
              <FormItem label="数量" labelCol={{ span: 8 }} wrapperCol={{ span: 15 }}>
                {getFieldDecorator('optionCount', {
                  initialValue: row.optionCount,
                  required: true,
                })(<Input style={{ width: '85%' }} placeholder="" />)}
              </FormItem>
              <FormItem label="现价" labelCol={{ span: 8 }} wrapperCol={{ span: 15 }}>
                {getFieldDecorator('nowPrice', { initialValue: row.nowPrice, required: true })(
                  <Input style={{ width: '85%' }} placeholder="" />
                )}
              </FormItem>
              <FormItem label="成本价" labelCol={{ span: 8 }} wrapperCol={{ span: 15 }}>
                {getFieldDecorator('costPrice', { initialValue: row.costPrice, required: true })(
                  <Input style={{ width: '85%' }} placeholder="" />
                )}
              </FormItem>
              {/* <FormItem label="类型" labelCol={{ span: 8 }} wrapperCol={{ span: 15 }}> */}
              {/* {getFieldDecorator('optionType', { */}
              {/* initialValue: row.optionType, */}
              {/* required: true, */}
              {/* })( */}
              {/* <Select style={{ width: '85%' }}> */}
              {/* <Option value="1">SP</Option> */}
              {/* <Option value="2">SC</Option> */}
              {/* <Option value="3">BP</Option> */}
              {/* <Option value="4">BC</Option> */}
              {/* </Select> */}
              {/* )} */}
              {/* </FormItem> */}
              {/* <FormItem label="行权价" labelCol={{ span: 8 }} wrapperCol={{ span: 15 }}>
                {getFieldDecorator('strikePrice', { initialValue: row.strikePrice, required: true })(
                  <Input style={{ width: '85%' }} placeholder="" />
                )}
              </FormItem> */}
            </Col>
          </Row>
        </Form>
      </Modal>
    );
  }

  componentDidMount() {}

  componentWillUnmount() {}
}

export default UpdateModal;
